import React, { Component } from 'react';
import {List, ListItem} from 'material-ui/List';
import InfiniteScroll from 'react-infinite-scroller';

import Divider from 'material-ui/Divider';
import Subheader from 'material-ui/Subheader';
import Avatar from 'material-ui/Avatar';
import {grey400, darkBlack, lightBlack} from 'material-ui/styles/colors';
import IconButton from 'material-ui/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem'; 
// Task component - represents a single todo item
export default class Tab4 extends Component {
  constructor(props) {
    super(props);
    this.state = {
        page:0,
        picPos:0,
        hasMore:true,
        items:[],
        ch:0
    };
  }
 componentDidMount(x,y,z){
  this.setState({cw:window.innerWidth,ch:window.innerHeight});
}  

loadMore(page) {
    //console.log('page:'+page);
    let picPos = this.state.picPos;
    let picLen = 100;
    let len = Math.min(3,picLen-picPos);
    if(len<=0){
        this.setState({hasMore:false});
        return;
    }
    let items = this.state.items;
    for(var i=0; i<len; i++){
      let pos = picPos+i;
      if(pos % 2 ==0 )
       items.push(
        <ListItem 
          key={'li_'+(pos)}
          leftAvatar={<Avatar src="images/ok-128.jpg" />}
          primaryText="西安市户县扶贫办"
          secondaryText={
            <p>
              <span style={{color: darkBlack}}>下午 4:35</span> --
              {'《小龙女玉蜂养殖项目》批准立项'+ pos}
            </p>
          }
        />
        );
      else
       items.push(
        <ListItem 
          style={{textAlign:'right'}}
          key={'li_'+(pos)}
          rightAvatar={<Avatar src="images/kolage-128.jpg" />}
          primaryText="西安市户县扶贫办"
          secondaryText={
            <p>
              <span style={{color: darkBlack}}>下午 4:35</span> --
              {'《小龙女玉蜂养殖项目》批准立项'+ pos}
            </p>
          }
        />
        );
    }
    picPos+=len;
    this.setState({picPos:picPos});
    let me=this;
    setTimeout(function() {
        me.setState({
            items:items,
        });
     }.bind(this), 100);
}  

  render() {
    return (
<div style={{height:this.state.ch+10,overflow:'auto'}}>

    <InfiniteScroll
        pageStart={0}
        loadMore={this.loadMore.bind(this)}
        hasMore={this.state.hasMore}
        loader={<div className="loader">Loading ...</div>}
        useWindow={false}
    >
        {this.state.items}
    </InfiniteScroll>
 
</div>



    );
  }
}
